<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	#zhibo_chart { width: 90%; height: 400px; padding-left: 5%; margin-top: 30px;}
</style>

<section>
	<div id="vm">
		<h3 class="pagetitle">直播课学员平均在线人数</h3>
		<hr />
		<!-- <div id="zhibo_chart"></div> -->
		<h4 class="pagetitle">按星期统计各课程平均在线人数</h4>
		<v-table style="width: 100%;  margin-top: 2px;"
			:height="700"  
			is-horizontal-resize
			:is-loading="isLoading" 
			:columns="columns_w"
			:table-data="classes_w" 
			row-hover-color="#fff" 
			sort-always>
		</v-table>
		<div class="line" style="justify-content: space-between; height: 40px;">
			<div class="download"><button @click="download(1)">导出</button></div>
			
		</div>
		<div style="height: 30px;"></div>
		<h4 class="pagetitle">按时段统计各课程平均在线人数</h4>
		<v-table style="width: 100%;  margin-top: 2px;"
			:height="700"  
			is-horizontal-resize
			:is-loading="isLoading" 
			:columns="columns_p"
			:table-data="classes_p" 
			row-hover-color="#fff" 
			sort-always>
		</v-table>
		<div class="line" style="justify-content: space-between; height: 40px;">
			<div class="download"><button @click="download(2)">导出</button></div>
			<div class="memo">注：所有数据均截止到昨日。</div> 
		</div>
	</div>
</section>

<script>
	var weekname = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	var period = ['07:00档', '09:00档', '12:00档', '15:30档', '19:00档', '20:30档', '21:45档'];
	var vm = new Vue({
		el: "#vm",
		data: {
			classes_w: [], // 按星期组织的数据
			columns_w: [], // 按星期组织的表头
			classes_p: [], // 按课程时段组织的数据
			columns_p: [], // 按课程时段组织的表头

			getdata: {
				classes: "	\
					select r.`name`, r.id, date_format(c.start_time, '%m-%d') date, \
					date_format(c.start_time, '%H:%i') time, date_format(c.start_time, '%W') weekEname, \
					date_format(c.start_time, '%w') weekday,count(distinct u.user_uuid) c \
					from user_live_class u \
					inner join live_class c on u.class_uuid = c.uuid \
					inner join live_course r on c.course_id = r.id \
					group by c.uuid \
					order by r.`name` \
				"
			},
			isLoading: false
		},
		methods: {
			setcolumns: function(){
				this.columns_w.push({field: 'name', title: '课目', width: 160, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true })
				for(let i in weekname){
					this.columns_w.push({field: weekname[i], title: weekname[i], width: 120, titleAlign: 'center', columnAlign:'center', isResize: true})
				}
				this.columns_w.push({field: 'avg', title: '总平均', width: 120, titleAlign: 'center', columnAlign:'center', isResize: true});
				
				this.columns_p.push({field: 'name', title: '课目', width: 160, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true })
				for(let i in period){
					this.columns_p.push({field: period[i], title: period[i], width: 120, titleAlign: 'center', columnAlign:'center', isResize: true})
				}
				this.columns_p.push({field: 'avg', title: '总平均', width: 120, titleAlign: 'center', columnAlign:'center', isResize: true});
			},
			showchart: function(){
				let that = this;
				post(this.getdata.classes, function(r){
					// console.log(r.length);

					for(let i in r){
						let x = r[i];
						// 合并相同课程的不同名称
						x.name = x.name.replace(/[0-9 ]/g, '').replace('提升', '提高');
						// 转义星期名称
						x.weekname = weekname[x.weekday];
						// 合并相同时段的不同时间点
						if(x.time < '09:00'){
							x.period = period[0];
						}else if(x.time < '12:00'){
							x.period = period[1];
						}else if(x.time < '15:00'){
							x.period = period[2];
						}else if(x.time < '18:00'){
							x.period = period[3];
						}else if(x.time < '20:00'){
							x.period = period[4];
						}else if(x.time < '21:00'){
							x.period = period[5];
						}else {
							x.period = period[6];
						}
					}
					// console.log(r)
					
					let d = {};  // 首先，利用对像的滤重效果，过滤出所有课程，分别存储总值和总次数，结果存在对像d中
					for (let i in r){
						let x = r[i]
						if(!d[x.name]) {
							d[x.name] = {}
							d[x.name][x.weekname] = {}
							d[x.name][x.weekname].val = Number(x.c)
							d[x.name][x.weekname].c = 1
						}else{
							if(!d[x.name][x.weekname]){
								d[x.name][x.weekname] = {}
								d[x.name][x.weekname].val = Number(x.c)
								d[x.name][x.weekname].c = 1
							}else{
								d[x.name][x.weekname].val += Number(x.c)
								d[x.name][x.weekname].c += 1
							}
						}
					}
					// console.log('d1', d)
					let all_avg = {name: '总平均值'}; // 最后增加一行，总平均值
					let all_temp = {}; // 用于记录计算总平均值时的val和c的容器
					for (let i in d){  // 解析上面处理好的对像d，转变成可以填入表中的格式。
						let t = {name: i}  // 
						let t_val = 0; // 合计单项值，用于求总平均
						let t_c = 0    // 合计单项计数，用于求总平均
						for (let j in weekname){
							w = weekname[j];
							
							if(!d[i][w]){ // 如果该单元没有值，比如某种课不在星期几时上过
								t[w] = 0
							}else{
								t[w] = (Number(d[i][w].val) / Number(d[i][w].c)).toFixed(2);
								t_val += Number(d[i][w].val);  // 求总平均用的总值
								t_c += Number(d[i][w].c);      // 求总平均用的总计数
								if(! all_temp[w]){
									all_temp[w] = {};
									all_temp[w].val = Number(d[i][w].val);
									all_temp[w].c = Number(d[i][w].c);
								}else{
									all_temp[w].val += Number(d[i][w].val); 
									all_temp[w].c += Number(d[i][w].c); 
								}
							}
							
						}
						
						t.avg = (t_val / t_c).toFixed(2); // 每一行求总平均
						that.classes_w.push(t)
					}
					all_temp.avg = {val: 0, c: 0}
					for(let j in weekname){
						let w = weekname[j]
						all_avg[w] = (all_temp[w].val / all_temp[w].c).toFixed(2); // 每一列求平均
						all_temp.avg.val += all_temp[w].val;
						all_temp.avg.c += all_temp[w].c;
					}
					all_avg.avg = (all_temp.avg.val / all_temp.avg.c).toFixed(2);
					that.classes_w.push(all_avg)
					// console.log(that.classes_w)
					
					// 以下为按时段统计。按时段与按星期相同处理，代码基本复制
					d = {};
					for (let i in r){
						let x = r[i]
						if(!d[x.name]) {
							d[x.name] = {}
							d[x.name][x.period] = {}
							d[x.name][x.period].val = Number(x.c)
							d[x.name][x.period].c = 1
						}else{
							if(!d[x.name][x.period]){ 
								d[x.name][x.period] = {}
								d[x.name][x.period].val = Number(x.c)
								d[x.name][x.period].c = 1
							}else{
								d[x.name][x.period].val += Number(x.c)
								d[x.name][x.period].c += 1
							}
						}
					}
					// console.log('d2', d);
					all_avg = {name: '总平均值'}; // 最后增加一行，总平均值
					all_temp = {}; // 用于记录计算总平均值时的val和c的容器
					for (let i in d){
						let t = {name: i}
						let t_val = 0;
						let t_c = 0
						for (let j in period){
							w = period[j];
							if(!d[i][w]){   // 如果该单元没有值，比如某种课不在某时段上过
								t[w] = 0
							}else{
								t[w] = (Number(d[i][w].val) / Number(d[i][w].c)).toFixed(2);
								t_val += Number(d[i][w].val);
								t_c += Number(d[i][w].c);
								if(! all_temp[w]){
									all_temp[w] = {};
									all_temp[w].val = Number(d[i][w].val); 
									all_temp[w].c = Number(d[i][w].c); 
								}else{
									all_temp[w].val += Number(d[i][w].val); 
									all_temp[w].c += Number(d[i][w].c); 
								}
							}
						}
						t.avg = (t_val / t_c).toFixed(2);
						that.classes_p.push(t)
					}
					all_temp.avg = {val: 0, c: 0} // 用于求最后的行列总合计平均值作准备
					for(let j in period){
						let w = period[j]
						all_avg[w] = (all_temp[w].val / all_temp[w].c).toFixed(2); // 每一列求平均
						all_temp.avg.val += all_temp[w].val;
						all_temp.avg.c += all_temp[w].c;
					}
					all_avg.avg = (all_temp.avg.val / all_temp.avg.c).toFixed(2);
					that.classes_p.push(all_avg)
					
				})
			},
			download: function(type){
				if(type == 1){
					download('按星期统计各课程平均在线人数', this.columns_w, this.classes_w);
				}else{
					download('按时段统计各课程平均在线人数-', this.columns_p, this.signup_p);
				}
				
			}
		},
		mounted: function(){
			this.setcolumns()
			this.showchart()
		}
	})
</script>